import echarts from 'echarts'
const install = function(Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          //测试
          test1: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }]
            };

            this.chart.setOption(optionData);
          },
          //各月作业人数-中央厨房统计图表
          kitchen: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              title: {
                text: '中央厨房统计图表'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['现场人数', '建筑面积', '作业面积', '设备数量', '加工量']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
              }]
            };

            this.chart.setOption(optionData);
          },
          //首页-设备统计
          chartsOnes: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var color = [
              '#FF8373', '#55D8FE', '#A3A0FB'
            ]

            const optionData = {
              title: {
                text: '共计3333台',
                top: '42%',
                left: '24.5%',
                textAlign: 'center',
                textStyle: {
                  fontSize: 14,
                  color: '#666666'
                }
              },
              color: color,
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}台 ({d}%)'
              },
              legend: {
                orient: 'vertical',
                right: '10%',
                top: '12%',
                itemGap: 15,
                itemWidth: 25,
                itemHeight: 25,
                formatter: function(params) {
                  for (var i = 0; i < optionData.series[0].data.length; i++) {
                    if (optionData.series[0].data[i].name == params) {
                      return params + "  " + optionData.series[0].data[i].value + "台";
                    }
                  }

                },
                textStyle: {
                  lineHeight: 30,
                  padding: [4, 0, 0, 10],
                  fontSize: 12,
                },
                data: ['重要设备', '关键设备', '一般设备']
              },

              series: [{
                name: '设备统计',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ["25%", "45%"],
                avoidLabelOverlap: false,
                label: {
                  show: true,
                  position: 'outside',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold',
                    formatter: '{b}'

                  }
                },
                labelLine: {
                  show: true
                },
                data: [{
                    value: 335,
                    name: '重要设备',

                  },
                  {
                    value: 310,
                    name: '关键设备',

                  },
                  {
                    value: 234,
                    name: '一般设备',

                  }

                ]
              }]
            };




            this.chart.setOption(optionData);
          },

          //首页-作业点类别统计A
          chartsTwosA: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();


            const optionData = {

              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "2%",
                top: "3%",
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false //不显示分割线
                },
                minInterval: 1,
                show: false,
                boundaryGap: ['5%', '5%'], //留白大小，坐标轴两边留白
              },
              yAxis: {
                type: "category",
                data: [' 中央厨房', '食品检验', '采购配送', '海上配餐', '陆地配餐', '工业物业', '商业物业'],
                inverse: true, //倒叙
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0
                },
                offset: 10,
                nameTextStyle: {
                  fontSize: 12
                },
                boundaryGap: ['5%', '5%'], //留白大小，坐标轴两边留白
              },
              series: [{
                name: "数量",
                type: "bar",
                data: [112, 145, 125, 154, 154, 168, 600],
                barWidth: 8,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    offset: [5, -2],
                    textStyle: {
                      color: "black",
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    color: function(params) {


                      var colorList = [
                        '#FF8373', '#55D8FE', '#A3A0FB'
                      ]
                      var index = 0;
                      if (params.dataIndex > 2) {
                        index = 1;
                      }
                      return colorList[index]; //前三列与之后列颜色区分
                    }
                  }

                }
              }]
            };




            this.chart.setOption(optionData);
          },
          //首页-作业点类别统计B
          chartsTwosB: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var color = [
              '#FF8373', '#55D8FE', '#A3A0FB'
            ]

            const optionData = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "2%",
                top: "3%",
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false //不显示分割线
                },
                minInterval: 1,
                show: false,
                boundaryGap: ['5%', '5%'],
              },
              yAxis: {
                type: "category",
                data: [' 中央厨房', ' 食品检验', '采购配送', '海上配餐', '陆地配餐', '工业物业', '商业物业'],
                inverse: true, //倒叙
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  interval: 0
                },
                offset: 10,
                nameTextStyle: {
                  fontSize: 12
                },
                boundaryGap: ['5%', '5%'],
              },
              series: [{
                name: "数量",
                type: "bar",
                data: [112, 145, 125, 154, 154, 168, 600],
                barWidth: 8,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    offset: [5, -2],
                    textStyle: {
                      color: "black",
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  //柱形图圆角，鼠标移上去效果
                  // emphasis: {
                  //     barBorderRadius: [10, 10, 10, 10]
                  // },

                  normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 10, 10]
                  }
                  // normal: {
                  //   color: function(params) {
                  //     var colorList = ["#9b0b11", "#777777"];
                  //     var index = 0;
                  //     if (params.dataIndex > 2) {
                  //       index = 1;
                  //     }
                  //     return colorList[index]; //前三列与之后列颜色区分
                  //   }
                  // }
                }
              }]
            };




            this.chart.setOption(optionData);
          },

          //首页-装备检维保次数
          chartsThrees: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var color = [
              '#FF8373', '#55D8FE', '#A3A0FB'
            ]

            const optionData = {
              color: color,
              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                splitLine: {
                  show: true,

                  lineStyle: {
                    type: 'dashed',
                    color: '#EAF0F4',

                  }

                }
              },
              yAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                splitLine: {
                  show: false,
                }
              },
              series: [{
                  name: '直接访问',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: [320, 302, 301, 334, 390, 330, 320],
                  barWidth: 22,
                },
                {
                  name: '邮件营销',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: '联盟广告',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: '视频广告',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                  name: '搜索引擎',
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
              ]
            }
            this.chart.setOption(optionData);
          },

          //首页-各月理化信息检验数目
          chartsFives: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var color = [
              '#FF8373', '#55D8FE', '#A3A0FB'
            ]

            const optionData = {
              color:'#A3A0FB',
              grid: {
                x: 30,
                y: 20,
                x2: 20,
                y2: 30
              },
              xAxis: {
                boundaryGap:false,
                type: 'category',
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                splitLine: {
                  show: true,

                  lineStyle: {
                    type: 'dashed',
                    color: '#EAF0F4',

                  }
                },


                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                splitLine: {
                  show: true,

                  lineStyle: {
                    type: 'solid',
                    color: '#EAF0F4',

                  }
                },
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbolSize: 10, //设定实心点的大小
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0,
                //     color: '#55D8FE'
                //   }, {
                //     offset: 1,
                //     color: '#fff'
                //   }])
                // },

              }]
            };




            this.chart.setOption(optionData);
          },


          //首页-各月作业人数
          chartsFours: function(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var color = [
              '#FF8373', '#55D8FE', '#A3A0FB'
            ]

            const optionData = {
              color:'#55D8FE',
              grid: {
                x: 30,
                y: 20,
                x2: 20,
                y2: 30
              },
              xAxis: {
                boundaryGap:false,
                type: 'category',
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                splitLine: {
                  show: true,

                  lineStyle: {
                    type: 'dashed',
                    color: '#EAF0F4',

                  }
                },


                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#333333"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#EAF0F4'
                  }
                },
                splitLine: {
                  show: true,

                  lineStyle: {
                    type: 'solid',
                    color: '#EAF0F4',

                  }
                },
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbolSize: 10, //设定实心点的大小
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#55D8FE'
                  }, {
                    offset: 1,
                    color: '#fff'
                  }])
                },

              }]
            };




            this.chart.setOption(optionData);
          },









        }
      }
    }
  })
}

export default {
  install
}
